<script setup></script>
<template>
	<div class="header">
		<span @click="$router.back()" class="back">
			<van-icon name="arrow-left" />
		</span>
		<span>消息(1)</span>
		<span style="font-size: 0.14rem;" class="clear"> 清除未读</span>
	</div>
	<div class="main">
		<span class="time">2023-12-12 12:12</span>
		<div class="message" @click="$router.push('/msgdetail')">
			<van-cell title="运费已到账" is-link>
				<template #value>
					<span style="color:red;font-size: 0.4rem;">·</span>
				</template>
			</van-cell>
			<div class="bottom">
				<span>您的订单：2023121201，从石家庄到北京的货物订单已经支付成功，请注意查收。</span>
			</div>
		</div>
		<div class="message">
			<van-cell title="运费已到账" is-link>
			</van-cell>
			<div class="bottom">
				<span>您的订单：2023121201，从石家庄到北京的货物订单已经支付成功，请注意查收。</span>
			</div>
		</div>
		<span class="time">2023-10-10 10:10</span>
		<div class="message">
			<van-cell title="系统消息">
			</van-cell>
			<div class="bottom">
				<span>欢迎使用GO车主端，竭诚为您提供优质货源，祝您使用愉快！</span>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.header {
	height: 0.6rem;
	background-color: #1678ff;
	font-size: 0.2rem;
	color: white;
	display: flex;
	align-items: flex-end;
	// justify-content: space-between;
	justify-content: center;
	padding: 0 0.1rem 0.1rem 0.1rem;
	box-sizing: border-box;
	position: relative;

	.back {
		position: absolute;
		left: 0.1rem;
	}

	.clear {
		position: absolute;
		right: 0.1rem;
	}
}

.main {
	height: calc(100% - 1rem);
	background-color: #f2f2f2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 0.2rem;
	box-sizing: border-box;

	.time {
		width: 30%;
		height: 0.2rem;
		text-align: center;
		line-height: 0.2rem;
		background-color: #cdcdcd;
		color: white;
		border-radius: 0.1rem;
	}

	.message {
		width: 90%;
		margin: 0.1rem 5%;

		.van-cell {
			border-radius: 0.1rem 0.1rem 0 0;
		}

		.bottom {
			font-size: 0.16rem;
			color: gray;
			height: 0.5rem;
			background-color: white;
			padding: 0.1rem;
			border-radius: 0 0 0.1rem 0.1rem;
		}
	}
}
</style>